<template>
  <div class="the-list">

    <div class="panel-search">
      <el-form inline :model="table.query" class="demo-form-inline">

      <el-form-item label="搜索">
        <el-input v-model="table.query.keyword" placeholder="用户ID、手机号搜索" clearable/>
      </el-form-item>
      
      <el-form-item label="奖励状态">
        <el-select v-model="table.query.status">
          <el-option label="全部" value="" />
          <el-option v-for="item in activityList.inviteStatus" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <div>
          <p style="margin-right: 24px;">邀请人信息：
            <span class="isHint" v-if="table.other.nickname || table.other.phone">{{table.other.nickname}} {{table.other.phone}}</span>
            <span v-else class="isEmpty">--</span>
          </p>
          
          <p style="display:inline-block;margin-right: 24px;">推荐用户数量：
            <span class="isHint" v-if="table.other.registerNum">{{table.other.registerNum}}</span>
            <span v-else class="isEmpty">--</span>
          </p>

          <p style="display:inline-block;margin-right: 24px;">推荐成功用户数量：
            <span class="isHint" v-if="table.other.successNum!==undefined">{{table.other.successNum}}</span>
            <span v-else class="isEmpty">--</span></p>
        
        </div>
      </div>

      <el-table :data="table.list" v-loading="table.isLoading" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>

        <el-table-column prop="invitedNickname" label="用户昵称" />
        <el-table-column prop="invitedPhone" label="注册手机号" />
        <el-table-column prop="createdAt" label="注册时间" />
        <el-table-column prop="status" label="当前状态">
          <template #default="{row}">
            {{row.status === 1 ? '邀请成功' : '注册成功'}}
          </template>
        </el-table-column>
        <el-table-column prop="successAt" label="最终成功时间" />
        <el-table-column prop="loginTime" label="最近登录时间" />
        <el-table-column prop="source" label="来源" />
        <el-table-column prop="source" label="注册入口">
          <template #default="{row}">
            {{ row.entryType === 1 ? '活动分享' : '邀请有礼' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <pagination :total="table.total" v-model:page="table.query.page" v-model:limit="table.query.pageSize" @pagination="tableFn.getTableData" />
      </div>

    </div>

  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination";
import { reactive, ref,watchEffect } from "vue";
import { getCustomerInviteList } from "@/api/invite";
import { activityList } from "@/utils/tool";
import {onBeforeRouteUpdate, useRouter } from "vue-router";


const router = useRouter();
const params = ref({});
const query = ref({});

watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})
// 默认数据备份，以便重置或恢复
const { $data: table, $fn: tableFn } = (()=>{
  const backup = {
    query: {
      keyword: "",
      status: "",
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    isLoading: false,
    query: { ...backup.query },
    list: [],
    total: 0,
    other:{
      nickname:"",//	邀请人昵称
      phone:"",//	邀请人电话
      registerNum:"",//	注册数
      successNum:"",//
    }
  });
  
  const $fn = {
    getTableData() {
      // $data.isLoading = true;
      console.log("***:",params.value.id,$data.query);
      getCustomerInviteList(params.value.id,$data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items||[];
          $data.total = res.data?.pagination.total_record||0;
          $data.other = res.data?.otherData||{};
        }
        console.log("other:",$data.other)
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
      $fn.getTableData();
    },
  };

  return {
    $data,
    $fn,
  };
})();


function init(){
  tableFn.getTableData();
}
init()

// 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
onBeforeRouteUpdate((to, from, next) => {
  if(to.params.id !== from.params.id && to.query.view === from.query.view){
    params.value.id = to.params.id;
    query.value = to.query;
    init();
  }
  next();
});

</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
</style>